<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/util_file/common.jspf"%>
<style>
#admin_product {
	font: 12px/1.2 "돋움", dotum, bold;
}

th {
	background-color: #f1f1f1;
	width: 100px;
}

/************member***************/
#member label.error {
	background: url("/jeons/images/check/unchecked.gif") no-repeat 0px 0px;
	padding-left: 16px;
	padding-bottom: 2px;
	font-weight: bold;
	color: #EA5200;
}

#member label.checked {
	background: url("/jeons/images/check/checked.gif") no-repeat 0px 0px;
}

#aa label.checked {
	background: url("/jeons/images/check/checked.gif") no-repeat 0px 0px;
}

#aa label.error {
	background: url("/jeons/images/check/unchecked.gif") no-repeat 0px 0px;
	padding-left: 16px;
	padding-bottom: 2px;
	font-weight: bold;
	color: #EA5200;
}

#useraddress {
	width: 200px;
}
</style>
<script type="text/javascript" src="/jeons/js/jquery.nyroModal.custom.js"></script>
<link rel="stylesheet" href="/jeons/css/nyroModal/nyroModal.css" type="text/css" media="screen" />
<script src="/jeons/js/jquery.metadata.js" type="text/javascript"></script>
<script src="/jeons/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="/jeons/js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/jeons/js/datepicker.util.js"></script>
<script type="text/javascript" src="/jeons/js/jquery.meio.mask.min.js"></script>
<script type="text/javascript">
	$(document).ready( function(){
		
		
		//달력
		 $("#userbirthday").datepicker({
				  dateFormat: 'yy-mm-dd',
				  changeMonth:true,
				  changeYear:true 
		});
		 
		jQuery.validator.messages.required = "필수 입력란입니다.";			
		jQuery.validator.messages.minlength = "글자의 길이가 알맞지 않습니다.";			
		jQuery.validator.messages.maxlength = "글자의 길이가 알맞지 않습니다.";			
		jQuery.validator.messages.equalTo = "일치하지 않습니다.";			
		jQuery.validator.messages.email = "잘못된 주소입니다.";			
		jQuery.validator.messages.url = "잘못된 주소입니다.";
		
				
		
		/* $.validator.addMethod("ratest", function(value, element) {
		    return $("#number01").val() !== '' && $("#number02").val() !== ''&& $("#number03").val() !== ''&& $("#phoncode").val() !== '';
		}, "Name is required");

	

		  $.validator.addMethod("name", function(value, element,label) {
			    return $("#firstname").val() !== '' && $("#lastname").val() !== '';
			}, "<img src='/jeons/images/check/unchecked.gif'/><font color='#EA5200'><b>필수항목입니다.</b></font>");
		 */
		 
		 $("#member").validate({
			rules: {
			 u_id:{
					required:true,
					minlength:5,
					maxlength:10
				},
				userpassword:{
					required:true,
					minlength:5,
					maxlength:15
				},
				reuserpassword: {
					required:true,
					minlength:5,
					maxlength:10,
					equalTo:"#userpassword"
				},
				username:{
					required:true,
					minlength:2,
					maxlength:7
				},
				usersex:{
					required:true
				},
				userbirthday: "required",
				useremail: {
					required:true,
					email:true
				},
				userhompage: {
					url:true
				},
				usermessenger: "required",
				usermessengerid: "required",
				userphonenumber: "required",
				userjob: "required",
			    phoncode: "required", 
				userzipcode: "required",
				useraddress: "required",
				useraddress02: "required"
				},
				success: function(label) {
				// set &nbsp; as text for IE
				label.html("&nbsp;").addClass("checked");
			},
		 
		});
		 
		 //필수입력표시
		 $('.req').each(function(){
			$(this).html($(this).text()+"<font color='red'>*</font>");
		 });
		 
		 
 
		/* 	$("form").validate({
				rules: {
					 lastname: "required",
					 firstname: "required",
				},
			    groups: {
			        name: "lastname firstname"
			    },
			    lastname: "name",
			    firstname: "name",
			   
			 	errorPlacement: function(error, $element) {
			        var name = $element.attr("name");
			        if (name === "firstname" || name === "lastname") {
			            error.insertAfter("#bb");
			         
			            
			        } else {
			            error.insertAfter($element);
			        }
			    }   
			}); */
			
		//폰번호 저장
			$('#number03').blur(function() {
				$("#userphonenumber").val($("#number01").val()+$("#number02").val()+$("#number03").val());
				var tmp =	$("#userphonenumber").val().length;
				if(tmp < 10){
					alert('올바른값이 아닙니다.');
				}	
				$("#userjob").focus();
			}); 
			
			
	
	
			//팝업
			$(".nm").nm({
				sizes:{
					minW : 400,
					maxW : 500,
					minH : 400,
					maxH : 400
				}
			});
	      
			/* type:'POST',
			url:'/jeons/member/login',
			data:member,
			success:function(data){ */
			//아이디 중복체크
			$('#IdCheck').click( function(){
				$.ajax({
					type:'GET',
					 url:'/jeons/member/checkid?u_id='+$('#u_id').val(),
					success:function(data){
						if (data=="true") {
							$('#IdCheck').addClass('checked');
							alert('사용가능한 아이디 입니다.');
						}else{
							alert('이미 사용중인 아이디 입니다.');
							$("#u_id").removeAttr("value");
							$("#u_id").focus();
							$("#u_id").next('label').remove();
							
						}
					}
				});
			});
			
		
			//전송
			$('#BtnSubmit').click( function(){
				if ($('#IdCheck').hasClass('checked')) {
					$('#member').submit();
				}else{
					alert('아이디 중복 체크를 눌러주세요!');
					/* $("#u_id").removeAttr("value");
					$("#u_id").focus();
					$("#u_id").next('label').remove(); */
					
				}
			});

			
			
		 
});
</script>
<fieldset class="autotab ui-widget ui-widget-content ui-corner-all">
	<br> <font color='red'>*</font> 필수 입력입니다.
	<form:form commandName="member" id="member">
		<table border="0" width="650px" height="50">
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center" class="req">아이디</th>
				<td colspan="3" width="100px"><form:input path="u_id"
						name="u_id" /> &nbsp;5~10자로 입력해주세요 &nbsp;
					<button type="button" id="IdCheck">중복체크</button></td>
				<!-- <td class="status"></td> -->
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center" class="req">비밀번호</th>
				<td colspan="3"><form:password path="userpassword"
						name="userpassword" /> &nbsp;5~10자로 입력해주세요</td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center" class="req">비밀번호 재입력</th>
				<td colspan="3"><input type="password" id="reuserpassword"
					name="reuserpassword" /> &nbsp;다시한번 비밀번호를 입력해주세요</td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center" class="req">이름</th>
				<td colspan="3"><form:input path="username" name="username" /></td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center">생일</th>
				<td colspan="3"><form:input path="userbirthday"
						name="userbirthday" /></td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center">메신저</th>
				<td colspan="3"><form:select name="usermessenger"
						path="usermessenger">
						<form:option value="NATEON">NATEON</form:option>
						<form:option value="MSN">MSN</form:option>
					</form:select> <input type="text" name="usermessengerid" id="usermessengerid" />
				</td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center" class="req">E-Mail</th>
				<td colspan="3"><form:input path="useremail" name="useremail" />
					&nbsp;ex.) amok8787@gamil.com 형식에 맞춰주세요!</td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center">홈페이지</th>
				<td colspan="3"><form:input path="userhompage"
						name="userhompage" /> &nbsp;ex.) http://www.jeons.com 형식에 맞춰주세요!</td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr id="ratest">

				<th height="24" align="center" class="req">핸드폰</th>
				<td><form:select name="phoncode" path="phoncode">
						<form:option value="KT">KT</form:option>
						<form:option value="SKT">SKT</form:option>
						<form:option value="LGT">LGT</form:option>
					</form:select></td>
				<td><select name="number01" id="number01">
						<option value="010">010</option>
						<option value="011">011</option>
						<option value="017">017</option>
				</select></td>
				<td><input type="text" id="number02" name="number02" /> &nbsp;<input
					type="text" id="number03" name="number03" /> <form:hidden
						path="userphonenumber" name="userphonenumber" /> <label></label></td>
			</tr>

			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center" class="req">직업</th>
				<td colspan="3"><form:input path="userjob" name="userjob" /></td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center" class="req">우편번호</th>
				<td colspan="3"><input type="text" id="userzipcode"
					name="userzipcode" /> &nbsp;회원님의 기본주소로 설정됩니다. <a
					href="/jeons/zipcode/index2?type=join" class="nm">
						<button type="button">우편번호 검색</button>
				</a></td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
			<tr>
				<th height="24" align="center">주소</th>
				<td colspan="3"><input type="text" id="useraddress"
					name="useraddress" /> 나머지 주소:<input type="text" id="useraddress02"
					name="useraddress02" /></td>
			</tr>
			<tr>
				<td colspan="4" bgcolor="#ffffff" height="1"></td>
			</tr>
		</table>
		<br>
		<div align="center">
			<button type="button" id="BtnSubmit">회원가입</button>
			<a href="/jeons/"><button type="button">취소</button></a>
		</div>
	</form:form>
</fieldset>
